<template>
  <div id="waibu">
    <head-2/>
    <div id="gameContent">
      <div class="hotStudy" v-for="item in imgArr" :key=item.id>
      <div class="hotContent">
        <div>
          <p class="P1">{{ item.gameSymal }}</p>
          <p class="P2">{{ item.description }}</p>
        </div>
        <div class="tupian"><img :src=item.address alt=""></div>
      <div class="GOGO" @click="goTo(item.routerName,textInfo.textContant)"><el-button type="primary" icon="el-icon-right">开始挑战</el-button></div>
      </div>
    </div>
    </div>
    <div id="nono"> </div>
  </div>
</template>


<script>
import head2 from '@/components/Head/head2.vue';
import {getPlayImg} from "@/api/playImg.js"
import { myHandleSpeak, handleStop } from "@/utils/speack";
export default {
  components: { head2 },
  data() {
    return {
      currentDate: new Date(),
      imgArr:[],
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      userScore: {
        score: 0,
        allCount: 14,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId:"computedFirst"
      },
    };
  },
  created(){
    getPlayImg().then(res=>{
      this.imgArr=res
    })
  },
  methods: {
    goTo(address,content){
     this.$router.push(`${address}`)
     myHandleSpeak(content)
    },
  },
}
</script>

<style lang="less" scoped>
#waibu{
  height: 100vh;
}
.hotStudy {
  margin-top: 2vh;
  text-align: left;
  margin-left: 2vw;
  .bigDiv {
    width: 25vw;
    border-left: 2.5vw solid rgb(32, 145, 245);
    height: 5vh;
    line-height: 5vh;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-indent: 8px;
    border-radius: 8px;
  }

  .hotContent {
    width: 94vw;
    height: 50vh;
    margin-left: -1vw;
    margin-top: 2vh;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid white;
  }
}
.GOGO{
  text-align: right;
  height: 10vh;
  line-height: 6.5vh;
  padding-right: 2vw;
}
.logo{
  width: 100vw;
  height: 2vh;
  margin-bottom: 11svh;
 font-weight: bold;
 letter-spacing: 1px;
 line-height: 2vh;
 color: rgb(250, 246, 246);
//  margin-top: 1vh;
}
.tupian {
  background-color: antiquewhite;
  height: 30vh;
  img{
    width: 100%;
    height: 30vh;
    object-fit:cover;
  }
}
.P1 {
  border: 1p solid white;
  font-size: 17px;
  font-weight: bold;
  margin-left: 10px;
  letter-spacing: 2px;
}

.P2 {
  font-size: 15px;
  margin-left: 10px;
  color: rgb(151, 150, 149);
}
#nono{
  height: 1vh;
  margin-top: 8vh;
}
#gameContent{
  align-items: center;
  padding: 2px;
  width: 96vw;
}

</style>